import React, { Component } from "react";
import { Form, Input, Table, Button ,Modal,Menu ,Divider,Select, Icon,DatePicker } from "antd";
import { Upload, message } from 'antd';
import Content from "../../components/Content/Content";
const { Item } = Form;
const { confirm } = Modal;
const { Option } = Select;
const { TextArea } = Input;
const { RangePicker } = DatePicker;
const InputGroup = Input.Group;
const data = [];
const props = {
  name: 'file',
  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  headers: {
    authorization: 'authorization-text',
  },
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} 上传成功`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} 上传失败`);
    }
  },
};
for (let i = 0; i < 15; i++) {
  data.push({
    key: i,
    name:'活性菌株1',
    strain_number: `ACCC000${i}`,
    other_numberme: 666666666,
    generic_name: `属名 ${i}`,
    words: `种加词 ${i}`,
    strain_name: `学名 ${i}`,
    popular_name: `俗名 ${i}`
  });
}
function handleChange(value) {
  console.log(`selected ${value}`);
}
class Query_mediumForm extends Component {
  constructor(props) {
    super(props);
  }
 columns1 = [
    {
      title: "编号",
      key: "1",
      dataIndex: "strain_number",
      className: "strain_number"
    },
    {
      title: "位置",
      dataIndex: "words",
      className: "words"
    },
    {
      title: "数量",
      dataIndex: "strain_name",
      className: "strain_name"
    },
    {
      title: "相似度",
      dataIndex: "strain_name",
      className: "strain_name"
    },
  ];
  
  columns = [
    {
      title: "任务编号",
      key: "1",
      dataIndex: "strain_number",
      className: "strain_number"
    },
    {
      title: "筛选菌株编号",
      dataIndex: "other_numberme",
      className: "other_numberme"
    },
    {
      title: "新增菌株编号",
      dataIndex: "generic_name",
      className: "generic_name"
    },
    {
      title: "菌种类别",
      dataIndex: "strain_name",
      className: "strain_name"
    },
    {
      title: '汇交类别',
      dataIndex: 'name',
      key: 'name',
      // width: 150,
      // fixed: 'right',
      filters: [
        {
          text: '活性菌株',
          value: '1111',
        },
        {
          text: '自定义',
          value: '4444',
        },
      ],
      onFilter: (value, record) => record.name.indexOf(value) === 0,
    },  
    {
      title: "上交人",
      dataIndex: "words",
      className: "words"
    },
    {
      title: "上交时间",
      dataIndex: "words",
      className: "words"
    },
    {
      title: "操作",
      className: "operate",
      dataIndex: "",
      render: () => (
        <span>
          <Button type="dashed" onClick={() => this.setModal2Visible(true)}>
            对比
          </Button>
          <Divider type="vertical" />
          <Button type="dashed" onClick={() => this.setModal1Visible(true)}>
            人工复核数据
          </Button>
        </span>
      )
    }
  ]
  state = {
    selectedRowKeys: [], // 单击此处配置默认列
    loading: false,
    visible1: false,
    modal1Visible: false,
    modal2Visible: false,
    value: '',
  };
  onChange = e => {
    console.log("radio checked", e.target.value);
    this.setState({
      value: e.target.value
    });
  };
  onChange = ({ target: { value } }) => {
    this.setState({ value });
  };


  onSubmit = evt => {
    evt.preventDefault();
    const { onSubmit } = this.props;
    onSubmit && onSubmit();
  };
  setModal1Visible(modal1Visible) {
    this.setState({ modal1Visible });
  }

  setModal2Visible(modal2Visible) {
    this.setState({ modal2Visible });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const { value } = this.state;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18}
      }
    };
    const formItemLayoutt = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      }
    };
    return (
      <div>
        <div className="filtrate">
          <span className="span">
            <span className="inputName">汇交类别</span>{" "}
            <Input placeholder="" style={{ width: 180 }} />{" "}
            <Button type="primary">筛选</Button>
          </span>
        </div>
        <Table
          columns={this.columns}
          
          dataSource={data}
          bordered
          style={{ marginLeft: 12, padding: 10 }}
        />
        <Modal
          title="复核数据"
          visible={this.state.modal1Visible}
          onOk={() => this.setModal1Visible(false)}
          onCancel={() => this.setModal1Visible(false)}
          maskClosable={false}
        >
         <p className="p" style={{display: 'flex',}}>
          <p className="result" style={{flex: 1,}}>
          <p>筛选菌株编号</p>
          <p>分离基物</p>
          <p>新增菌株编号</p>
          <p>海拔</p>
          <p>采集地点:</p>
          <p>经纬度</p>
          <p>采集时间</p>
          <p>采样菌株编号</p>
          </p>
          <p className="result" style={{flex: 1,}}>
          <p>分离部位</p>
          <p>菌种类别</p>
          <p>近源菌株</p>
          <p>培养基</p>
          <p>培养温度</p>
          <p>活性</p>
          <p>提供人</p>
          <p>提供日期</p>
          </p>
       </p>
      </Modal>
      <Modal
          title="对比"
          visible={this.state.modal2Visible}
          onOk={() => this.setModal2Visible(false)}
          onCancel={() => this.setModal2Visible(false)}
          maskClosable={false}
        >
        <Form {...formItemLayoutt} onSubmit={this.onSubmit} colon={false}>
              <div style={{display:'flex'}}>
                <span style={{flex:1}}>
                <Item label="菌株序列" style={{marginTop:4}}>
                <TextArea
                  value={value}
                  onChange={this.onChange}
                  placeholder="请输入序列信息"
                  autosize={{ minRows: 3, maxRows: 5 }}
                />
                </Item>
                <Item label="或上传文件" style={{marginTop:4}}>
                  <Upload
                {...props} 
                // fileList={this.state.fileList}
                style={{display:'flex'}}
                showUploadList={true}
              >
                <Input style={{width:280}} />
                <Button>选择文件</Button>
              </Upload>
                
                </Item>
                <Item label="结论">
                  {getFieldDecorator("gathering1_place")}
                  <Select
                    mode="tags"
                    style={{ width: "100%" }}
                    onChange={handleChange}
                    tokenSeparators={[","]}
                    showArrow={true}
                  >
                    <Option value="jack">序列比对一致</Option>
                    <Option value="lucy">序列比对不一致</Option>
                  </Select>
                </Item>

                
                </span>
                <span style={{flex:1}}>
                  <Item label="复核序列">
                  <TextArea
                  value={value}
                  onChange={this.onChange}
                  placeholder="请输入序列信息"
                  autosize={{ minRows: 3, maxRows: 5 }}
                />
                  </Item>
                  <Item label="或上传文件" style={{marginTop:4}}>
                  <Upload
                {...props} 
                // fileList={this.state.fileList}
                style={{display:'flex'}}
                showUploadList={true}
              >
                <Input style={{width:280}} />
                <Button>选择文件</Button>
              </Upload>
                </Item>
                
                <Item label="备注">
                    {getFieldDecorator("habitat_type")}
                    <TextArea placeholder="" autosize />
                  </Item>
                <span style={{marginLeft:'250px'}}><Button type="primary">提交</Button></span>
                <span style={{marginLeft:'50px'}}><Button type="primary">退回</Button></span>
                <Button type="primary" style={{marginLeft:'-550px'}}>对比</Button>
                </span>
              </div>
            </Form>
            <hr></hr>
            <Table
          columns={this.columns1}
          
          // dataSource={data}
          bordered
          style={{ marginLeft: 12, padding: 10 }}
        />
      </Modal>
      </div>
    );
  }
}


const WrapperedQuery_mediumForm = Form.create({
  name: "query medium"
})(Query_mediumForm);

class ReviewToSubmit extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = () => {
    const { form } = this.form.props;
    form.validateFields((errs, values) => {
      console.log(errs, values);
    });
  };
  render() {
    return (
      <Content>
        <WrapperedQuery_mediumForm
          wrappedComponentRef={ref => (this.form = ref)}
          onSubmit={this.onSubmit}
        />
      </Content>
    );
  }
}

export default ReviewToSubmit;
